<template>
  <div class="milepost">
    <div class="head pt32 pb32">
      <div class="back-title ft14 ">
        <div class="back pr32 align-row-center pointer">
          <i class="icon ic_back mr8"></i>
          <span @click="$router.back(-1)">返回</span>
        </div>
        <div class="fc-black">{{projectName}}>里程碑</div>
        <div class="save-milepost" v-show="tempId">保存里程碑</div>
      </div>
    </div>
    <div class="content">
      <vuescroll :ops="ops">
        <div class="row">
          <div class="left">
            <div class="top"></div>
          </div>
          <div class="right">
            <ul class="top-list">
              <li>执行人</li>
              <li>开始时间</li>
              <li>截止时间</li>
              <li>定期汇报</li>
              <li>完结情况</li>
              <li>操作</li>
            </ul>
          </div>
        </div>
        <div class="row">
          <div class="tree">
            <el-tree
              :data="data"
              node-key="id"
              default-expand-all
              @node-expand="nodeExpand"
              @node-collapse="nodeCollapse"
              :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ data.name}}</span>
                <span class="milepost-btn">
                  <div class="milepost-add" @click="() => append(data)"></div>
                  <div class="milepost-del" @click="() => remove(node, data)" v-show="node.level!=1"></div>
                </span>
                 <ul class="info-list">
                    <li :class="['info-item',node.level==1?'info-item-first':'']">
                      <ul>
                        <li>{{data.principalName||'无'}}</li>
                        <li>{{data.startTime||'无'}}</li>
                        <li>{{data.endTime||'无'}}</li>
                        <li>
                         {{data.daysString}},{{data.level!=0?(data.reportCycleType!=0?data.reportTime:''):''}}
                        </li>
                        <li>{{data.status==1?'未开始':(data.status==2?'在建':(data.status==3?'完成':'未知'))}}</li>
                        <li><i class="icon_set" @click="setMilepost(data,'edit')" v-show="node.level!=1"></i></li>
                      </ul>
                    </li>
                  </ul>
              </span>
            </el-tree>
          </div>
        </div>
      </vuescroll>
    </div>
    <!--    修改里程碑基本信息-->
    <transition name="fade">
      <div class="set-milepost" v-show="is_show_set_milepost">
        <div class="set-milepost-inner">
          <div class="title">
            <h3>修改信息</h3>
            <i class="ic_close" @click="is_show_set_milepost=false"></i>
          </div>
          <div class="form">
            <el-form ref="milepostForm" :rules="rules" :model="milepostForm" label-width="144px" class="demo-ruleForm">
              <el-form-item label="名称" prop="name">
                <el-input placeholder="请输入里程碑名称" v-model="milepostForm.name"></el-input>
              </el-form-item>
              <el-form-item label="执行人" prop="principalId">
                <input type="hidden" v-model="milepostForm.principalId">
                <span class="add-manager" @click="is_show_selectMember=true"></span>
                <span class="select-manager" v-text="milepostForm.principalName">古俊</span>
              </el-form-item>
              <el-form-item label="选择日期" prop="startTime">
                <el-col style="float: left;width: 176px;">
                  <el-form-item>
                    <el-date-picker type="date" v-model="milepostForm.startTime" placeholder="开始时间"
                                    style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col style="float: left;width: 48px;text-align: center" class="line line-time">至</el-col>
                <el-col style="float: left;width: 176px;">
                  <el-form-item prop="endTime">
                    <el-date-picker type="date" v-model="milepostForm.endTime" placeholder="截止时间"
                                    style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="定期汇报" prop="reporting_time_type">
                <el-select placeholder="请选择定期汇报" v-model="reporting_time_type"
                           @change="selectReportingType(reporting_time_type)">
                  <el-option label="无" value="1">无</el-option>
                  <el-option label="自定义" value="2">自定义</el-option>
                </el-select>
                <p v-if="milepostForm.reportCycleType!=0&&milepostForm.reportCycleType">
                  <span v-if="milepostForm.reportCycleType==7">每周</span>
                  <span v-if="milepostForm.reportCycleType==30">每月</span>
                  <span v-for="item in milepostForm.days">{{item}},</span>
                  &nbsp;{{milepostForm.reportTime}}, 汇报
                </p>
              </el-form-item>
              <el-form-item class="text-right">
                <div class="save-btn" @click="saveMilepost">保存</div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </transition>
    <!--    修改里程碑基本信息-->
    <!--    自定义日期-->
    <customDate v-if="custom_date_data.is_show" :data="custom_date_data" @callback="selectDateCallback"></customDate>
    <!--    自定义日期-->
    <!--    选择执行人-->
    <div class="main-popup" v-if="is_show_selectMember">
      <selectMember @close="closeModal" :title="'选择执行人'" :select="executor" @callback="selectMemberCallback"
                    :indexClose="'is_show_selectMember'"/>
    </div>
    <!--    选择执行人-->
  </div>
</template>

<script>
  import vuescroll from 'vuescroll'
  import mileList from '@/components/milepost/list'
  import customDate from '@/components/customDate'
  import selectMember from '@/components/base/selectMember'; //选择执行人

  let id = 1000;
  export default {
    name: "Milepost",
    components: {
      vuescroll, mileList, customDate, selectMember
    },
    data() {
      return {
        rules: {
          name: [
            {required: true, message: '请输入里程碑名称', trigger: 'blur'},
          ],
          principalId: [
            {required: true, message: '请选择执行人', trigger: 'change'},
          ],
          startTime: [
            {required: true, message: '请选择开始时间', trigger: 'blur'},
          ],
          endTime:[
            {required: true, message: '请选择结束时间', trigger: 'blur'},
          ],
          reporting_time_type:[
            {required: true, message: '请选择定期汇报', trigger: 'change'},
          ]
        },
        reporting_time_type:'1',//1无，2自定义
        is_show_selectMember: false,//是否显示执行人框
        data: [],
        executor: '',//已选择执行人
        executor_info: {},//执行人信息
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '250px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px',//距离容器的距离
            keepShow: false,
          },
          bar: {
            background: '#cbd5df',
            keepShow: true,
            size: '6px',
            minSize: 0.1
          }
        },
        parentId: '',//上级里程碑id
        projectId: '',//项目id
        mileList: [],//里程碑列表
        is_show_set_milepost: false,//是否显示设置里程碑信息框
        custom_date_data: {
          type: '1',//1每周 2每月
          is_show: false,//是否显示
        },//自定义日期数据
        milepostForm: {
          reporting_time_type: 1,
          name: '',//里程碑名称
          ignoreHoliday: '',//是否跳过节假日
          ignoreWeekend: '',//是否跳过周末
          reportTime: '',//汇报时间
          days: [],//汇报日期，32表示每月最后一天
          startTime: '',//项目开始时间
          endTime: '',//项目结束时间
        },
        edit_id: '',//编辑的里程碑id
        tempId:'',//模板id
      }
    },
    created() {
      this.projectId = this.$route.query.id;
      this.projectName = this.$route.query.name;
      this.tempId = this.$route.query.tempId;
      if (this.tempId) {
        //模板创建,查询模板详情
        this.getTempDeatils(this.tempId);
      } else {
        //自己创建
        //查询里程碑
        this.queryMilepost();
      }
    },
    methods: {
      //关闭人员弹框
      closeModal(res) {
        this[res] = false;
      },
      //查询里程碑
      queryMilepost() {
        this.$http.post('plan/project/plan/tree', {
          projectId: this.projectId
        }).then(res => {
          if (res.statusCode == 200) {
            let data = res.data;
            this.root_milestone_id = data.id;
            data.label = data.name;
            this.data = [data];
          } else {
            this.$message.error(res.statusMsg);
          }
        });
      },
      //保存里程碑
      saveMilepost() {
        this.$refs['milepostForm'].validate((valid) => {
          if (valid) {
            let params = {
              companyId: this.$store.state.userInfo.companyId,
              projectId: this.projectId,//项目id
              name: this.milepostForm.name,//里程碑名称
              principalId: this.executor,//里程碑项目负责人 暂时写死的，选择执行人组件还未写完
              ignoreHoliday: this.milepostForm.ignoreHoliday,//是否跳过节假日
              ignoreWeekend: this.milepostForm.ignoreWeekend,//是否跳过周末
              reportTime: this.milepostForm.reportTime,//汇报时间
              days: this.milepostForm.days,//汇报日期，32表示每月最后一天
              startTime: this.milepostForm.startTime,//项目开始时间
              endTime: this.milepostForm.endTime,//项目结束时间
              reportCycleType: this.milepostForm.reportCycleType,//0代表无 7代表周，30代表月
              parentId: this.parentId,//上级里程碑id
            };
            if (!this.edit_id) {
              //新增
              this.$http.post('plan/project/plan/edit', params).then(res => {
                if (res.statusCode == 200) {
                  this.$message.success('添加成功');
                  this.is_show_set_milepost = false;
                  this.queryMilepost();
                } else {
                  this.$message.error(res.statusMsg)
                }
              });
            } else {
              //编辑
              params.id = this.edit_id;
              this.$http.post('plan/project/plan/edit', params).then(res => {
                if (res.statusCode == 200) {
                  this.$message.success('编辑成功');
                  this.is_show_set_milepost = false;
                  this.queryMilepost();
                } else {
                  this.$message.error(res.statusMsg)
                }
              });
            }
          } else {
            return false
          }
        });
      },
      //选择定期汇报方式
      selectReportingType(type) {
        console.log(this.custom_date_data)
        if (type == 1) {
          this.milepostForm.reportCycleType = 0;
          this.custom_date_data={
            type: '1',//1每周 2每月
            is_show: false,//是否显示
          };
          //选择为定期汇报 ：无
        } else if (type == 2) {
          //选择定期汇报 ：自定义
          this.custom_date_data.is_show = true;
          this.custom_date_data.type = '1';//1每周，2每月
          if (this.custom_date_data.type == 1) {
            //每周
            this.custom_date_data.holiday_week = true;//跳过假日
          } else if (this.custom_date_data.type == 2) {
            //每月
            this.custom_date_data.holiday_month = false;//跳过假日
            this.custom_date_data.double_cease_month = false;//跳过双休
          }
          this.custom_date_data.time = new Date(2016, 9, 10, 18, 40);//汇报时间
          this.custom_date_data.day = [];//汇报的天数
          this.custom_date_data.is_last_day = true;//是否最后一天
          this.custom_date_data.checkedWeeks = [''];//默认每周选中的
        }
      },
      //设置里程碑
      setMilepost(data, type) {
        this.is_show_set_milepost = true;
        //判断是否是新增里程碑，还是修改里程碑
        if (type == 'edit') {
          //修改
          this.edit_id = data.id;
          this.parentId = '';
          //修改数据回显
          this.milepostForm.name = data.name;
          this.executor_info.name = data.principalName;
          this.executor = data.principalId;
          this.milepostForm.startTime = data.startTime;
          this.milepostForm.endTime = data.endTime;
          this.milepostForm.reportCycleType=data.reportCycleType;
          this.reporting_time_type = data.reportCycleType == 0 ? '1' : '2'//1:无，2:自定义
          this.milepostForm.days=data.days;
          this.milepostForm.reportTime=data.reportTime;
          this.milepostForm.principalId=data.principalId;
        } else {
          //新增,重置数据
          this.parentId = data.id;
          this.edit_id = '';
          this.milepostForm = {};
          this.milepostForm.reporting_time_type=0;
          this.executor_info.name = '';
          this.executor = '';
        }
      },
      //添加节点
      append(data) {
        this.setMilepost(data);
        return;
        const newChild = {id: id++, name: '新里程碑', children: []};
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },
      //删除节点
      remove(node, data) {
        let _id = data.id;
        this.$http.post('plan/project/plan/delete', {
          id: _id
        }).then(res => {
          if (res.statusCode == 200) {
            this.$message.success('删除成功');
            this.queryMilepost();
          } else {
            this.$message.error(res.statusMsg);
          }
        });
        return;
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },
      //节点展开
      nodeExpand(data, node, event) {
        setTimeout(function () {
          let expanded = node.expanded;
        }, 10);
      },
      //节点关闭
      nodeCollapse(data, node, event) {
        setTimeout(function () {
          let expanded = node.expanded;
        }, 10);
      },
      //选择自定义日期的回调
      selectDateCallback(data) {
        if (data.type == '1') {
          this.milepostForm.reportCycleType = 7;
          //每周
          this.milepostForm.ignoreHoliday = data.ignoreHoliday;
          this.milepostForm.reportTime = data.reportTime.Format('hh:mm');
          this.milepostForm.days = data.days;
          this.custom_date_data = false;
        } else {
          this.milepostForm.reportCycleType = 30;
          //每月
          this.milepostForm.ignoreHoliday = data.ignoreHoliday;
          this.milepostForm.reportTime = data.reportTime.Format('hh:mm');
          this.milepostForm.days = data.days;
          this.custom_date_data = false;
        }

      },
      //选择执行人回调
      selectMemberCallback(res, indexClose, obj) {
        this.executor_info = obj;
        this.executor = obj.userId;
        this.milepostForm.principalId=obj.userId;
        this.milepostForm.principalName=obj.name;
        this.closeModal('is_show_selectMember');
      },
      //关闭人员弹框
      closeModal(res) {
        this[res] = false;
      },
      //查询模板详情
      getTempDeatils(_id) {
        this.$http.get('plan/plan/temp/info', {
          params: {
            groupId: _id
          }
        }).then(res => {
          if (res.statusCode == 200) {
            let children = res.data.children;
            this.$http.post('plan/project/plan/tree', {
              projectId: this.projectId
            }).then(res => {
              if (res.statusCode == 200) {
                let data = res.data;
                this.root_milestone_id = data.id;
                data.label = data.name;
                data.children = children;
                this.data = [data];
              } else {
                this.$message.error(res.statusMsg);
              }
            });
          } else {
            this.$message.error(res.statusMsg);
          }
        })
      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .milepost {
    height: 100%;
    padding-bottom: 24px;
    box-sizing: border-box;
    padding-right: 28px;

    .custom-date {
      z-index: 101;
    }

    .set-milepost {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      z-index: 100;
      background-color: rgba(0, 0, 0, 0.5);

      .set-milepost-inner, .custom-date-inner {
        width: 608px;
        height: fit-content;
        border-radius: 6px;
        background-color: #ffffff;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;

        .title {
          line-height: 80px;
          height: 80px;
          padding: 0 32px;
          font-size: 16px;
          color: #454A55;
          position: relative;

          .ic_close {
            position: absolute;
            background-image: url("../../../assets/img/close_icon.png");
            width: 16px;
            height: 16px;
            background-size: cover;
            background-repeat: no-repeat;
            right: 32px;
            top: 32px;
            cursor: pointer;
          }
        }

        .form {
          padding-right: 64px;

          .save-btn {
            display: inline-block;
            border-radius: 6px;
            width: 88px;
            line-height: 32px;
            text-align: center;
            cursor: pointer;
            background-color: #0755db;
            color: #FFFFFF;
          }

          .add-manager {
            position: absolute;
            width: 38px;
            height: 38px;
            background-image: url("../../../assets/img/project/add_manager_icon1.png");
            background-size: 38px 38px;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
          }

          .select-manager {
            padding-left: 50px;
          }
        }
      }
    }

    > .head {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .back-title {
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;

        .back {
          color: #96a2aa;
        }
        .save-milepost {
          position: absolute;
          padding: 10px;
          text-align: center;
          right: 0;
          top: 0;
          background-color: #0a52e4;
          border-radius: 6px;
          color: #ffffff;
          cursor: pointer;
        }
      }
    }

    .content {
      height: calc(100% - 79px);
      background-color: #ffffff;
      border-radius: 6px;
      padding: 24px;

      .row {
        display: flex;
        position: relative;

        .left {
          width: 303px;

          .top {
            height: 49px;
            background-color: #f2f6f9;
          }

          .tree {
            height: calc(100% - 49px);

            .info-list {
              position: absolute;
              width: calc(100% - 303px);
              height: 60px;
              left: 303px;
              top: 0;
              background: #000;
            }
          }
        }

        .tree {
          width: 100%;
          position: relative;
          height: 60px;

          .info-list {
            position: absolute;
            width: calc(100% - 303px);
            height: 60px;
            line-height: 60px;
            left: 303px;
            top: 0;

            > li {
              text-align: center;
              font-size: 14px;
              color: #454A55;

              ul {
                display: flex;

                li {
                  flex: 1;

                  i {
                    display: inline-block;
                    background-image: url("../../../assets/img/milepost/ic_edit.png");
                    background-repeat: no-repeat;
                    background-size: cover;
                    width: 14px;
                    height: 14px;
                  }
                }
              }
            }
          }

          .info-item-first {
            li {
              color: #96A2AA;
            }
          }
        }

        .right {
          flex: 1;

          .top-list {
            height: 49px;
            line-height: 49px;
            background-color: #f2f6f9;
            display: flex;

            li {
              flex: 1;
              text-align: center;
              font-size: 14px;
              color: #96a2aa;
            }
          }
        }
      }
    }
  }
</style>
<style type="text/scss" lang="scss">
  .milepost {
    .el-tree {
      font-size: 14px;

      .el-tree-node__content {
        height: 60px;
      }

      .el-tree-node {
        position: relative;
      }

      .milepost-btn {
        position: absolute;
        left: 220px;
        top: 20px;

        .milepost-add {
          display: inline-block;
          width: 16px;
          height: 16px;
          background-image: url("../../../assets/img/milepost/ic_add.png");
          background-repeat: no-repeat;
          background-position: center;
        }

        .milepost-del {
          display: inline-block;
          width: 16px;
          height: 16px;
          background-image: url("../../../assets/img/milepost/ic_minus.png");
          background-repeat: no-repeat;
          background-position: center;
          margin-left: 5px;
        }
      }

    }
  }
</style>
<style lang="scss" type="text/scss">
  .form {
    .el-form-item__label {
      padding-right: 16px;
    }

    .el-input__inner, .el-textarea__inner {
      width: 400px;
      background-color: #f2f6f9;
      border-color: #f2f6f9;
    }

    .el-date-editor--date, .el-date-editor--time {
      .el-input__inner {
        width: 176px;
      }
    }

    .el-input__inner:focus, .el-textarea__inner:focus {
      background-color: #FFFFFF;
      border-color: #0755db;
    }

    .el-input__inner:hover {
      border-color: #f2f6f9;
    }

    .line-time {
      width: 20px;
    }
  }
</style>
